import React, { useState, useContext } from 'react';
import { Button } from 'antd';
import store from '../store';
import reduxStore from '../store/reduxStore';
import FirstRedux from '../component/reduxLearn/FirstRedux';
/* react 连接 redux */
// import { Provider as ProviderRedux } from 'react-redux';
// Consumer
import myContext, { Provider, myContext_two, contextTwoData } from '../component/dataFlow/ContextBox';
import ContextChil from '../component/dataFlow/ContextChil';
import TwoContext from '../component/dataFlow/TwoContext';

console.log('<< 仓库 >>', store.getState(), 'myContext >>>', myContext);
console.log('reduxStore store仓库', reduxStore.getState());
store.dispatch({ type: 'decrease' });
// console.log('数据改变后', store.getState())

/*
  引入 createContext 中的 Provider 和 Consumer
  Provider 传值时使用，使用value传递值
  Consumer 接受值时使用
*/
// Consumer
// const { Provider, } = React.createContext("默认的值")

const contextObj = {
  title: 'context 数据流学习',
  time: '2021-11-16',
  num: 12
};

export default function ReduxLearn(props) {
  const my_Context = useContext(myContext);

  const [contextData, setContextData] = useState(contextObj);

  return (
    <div className='my__component__wrapper'>
      <h1>Redux的基本使用学习</h1>
      {/* <ProviderRedux>
        <p>test</p>
      </ProviderRedux> */}
      {/* Redux 组件 */}
      <FirstRedux />

      {/* Provider 整个组件的最顶层 通过包裹传递值 */}
      <h1>Context 的基本使用与学习</h1>
      <Provider value={contextData}>
        <Button
          type='primary'
          onClick={() => {
            // console.log('改变值！！！', contextData);
            setContextData({
              ...contextData,
              num: (contextData.num += 1)
            });
            my_Context.count++;
          }}
        >
          改变Context中的值
        </Button>
        <ContextChil />
        {/* <myContext.Provider>

        </myContext.Provider> */}
      </Provider>

      {/* 多context情景使用情况 */}
      <h1>第二个 context 的基本使用与学习</h1>
      <myContext_two.Provider value={contextTwoData}>
        <TwoContext />
      </myContext_two.Provider>
    </div>
  );
}
